<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <p class="one" ref="one">{{count}}</p>
            <button @click="count++">点击</button>
        </div>
    </div>

</body>
<script>

    // 监听到数据发生改变, 获取标签内更新后的文本

    // Vue特征
    // 1. 声明式渲染(Vue实例Vue初始化)
    // 2. 响应式(Vue实例数据更新)

    // 生命周期分为三个阶段: 初始化阶段  更新阶段  销毁阶段   8个钩子函数

    // beforeCreate
    // created
    // beforeMount
    // mounted

    // beforeUpdate
    // updated

    // beforeDestroy
    // destroyed


    // 注意: 
    // 有没有生命周期钩子函数, Vue实例都会进行初始化, 数据改变之后,视图也都会更新, 生命周期钩子函数 的目的,在Vue实例的不同阶段 , 执行一些相关的操作 
    // 生命周期钩子函数 this=>Vue实例(不能使用箭头函数)

    var vm = new Vue({
        el: "#app",
        data: {
            count: 1,
        },
        computed: {

        },
        watch: {
            count: async function (newVal, oldVal) {
                console.log("count数据发生改变");

                await this.$nextTick();
                console.log(this.$refs.one.textContent);

            }
        },
        mounted() {
            // console.log(this.$refs);
            // console.log(this.$refs.one);
            // console.log(this.$refs.two);
        },
    })




</script>

</html>